<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item> 
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <h2>Echarts数据展示</h2>
      <div class="area">
        <div
          class="textDemo"
          id="main"
          style="width: 600px; height: 400px"
        ></div>
        <div
          class="onlinDemo"
          id="main2"
          style="width: 600px; height: 400px"
        ></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Report',
  async mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    // 绘制图表
    myChart.setOption({
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })

    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('main2'))
    //获取数据
    const { data: res } = await this.$http.get('reports/type/1')
    if (res.meta.status !== 200) {
      return this.$message.error('获取折线列表失败!')
    }
    this.$message.success('获取折线列表成功!')
    // 绘制图表
    myChart2.setOption(res.data)
  },
}
</script>

<style scoped>
.area{
    align-items: center;
    margin-left: 200px;
}
.textDemo {
  float: left;
}
.onlinDemo {
  float: left;
}
</style>